<template>
  <div>
    <div class="servicePackageListInstance">
      <div class="deployInfoDivInstanceDialog">
        <!-- 服务信息输入框 -->
        <div>
          <div class="displayLayout" v-show="openType === 'configuration'">
            <el-row>
              <el-col :span="8">
                <div>
                  <span> 服务标识： </span>
                  <el-input
                    placeholder="请输入服务标识"
                    style="width: 250px"
                    v-model="gvStoreYamlDeployVo.yamlDeployBaseInfo.appName"
                    disabled
                  >
                  </el-input>
                </div>
              </el-col>
              <el-col :span="8">
                <div>
                  <span> 服务版本： </span>
                  <el-input
                    placeholder="请输入服务版本"
                    style="width: 250px"
                    v-model="gvStoreYamlDeployVo.yamlDeployBaseInfo.version"
                    disabled
                  >
                  </el-input>
                </div>
              </el-col>
            </el-row>
          </div>
          <div class="displayLayout" v-show="openType === 'configuration'">
            <el-row>
              <el-col :span="8">
                <div>
                  <span> 服务镜像： </span>
                  <el-input
                    placeholder="请输入服务镜像"
                    style="width: 250px"
                    v-model="gvStoreYamlDeployVo.yamlDeployBaseInfo.image"
                    disabled
                  >
                  </el-input>
                </div>
              </el-col>
              <el-col :span="8">
                <div>
                  <span> 服务描述： </span>
                  <el-input
                    placeholder="请输入服务描述"
                    clearable
                    style="width: 250px"
                    v-model="gvStoreYamlDeployVo.yamlDeployBaseInfo.description"
                  >
                  </el-input>
                </div>
              </el-col>
            </el-row>
          </div>
          <div class="displayLayout">
            <el-row>
              <el-col :span="8" v-show="openType === 'configuration'">
                <div>
                  <span> 部署名称： </span>
                  <el-input
                    placeholder="请输入部署名称"
                    clearable
                    style="width: 250px"
                    v-model="gvStoreYamlDeployVo.yamlDeployBaseInfo.deployName"
                    disabled
                  >
                  </el-input>
                </div>
              </el-col>
              <el-col :span="8">
                <div>
                  <span> 副本数量： </span>
                  <el-input-number
                    placeholder="请输入服本数量"
                    type="number"
                    style="width: 250px"
                    v-model="gvStoreYamlDeployVo.yamlDeployBaseInfo.replicas"
                    :min="1"
                    :max="100"
                    :step="1"
                  >
                  </el-input-number>
                </div>
              </el-col>
              <el-col :span="16" v-show="openType === 'update'">
                <span> 镜像名称： </span>
                <el-input
                  clearable
                  style="width: 300px"
                  v-model="gvStoreYamlDeployVo.yamlDeployBaseInfo.image.split(':')[0]"
                  disabled
                >
                </el-input>
                <span style="margin-left: 10px;">版本：</span>
                <el-select
                  v-model="gvStoreYamlDeployVo.yamlDeployBaseInfo.version"
                  style="width: 120px"
                  @focus="getAppInfoVersionList(gvStoreYamlDeployVo.yamlDeployBaseInfo.appName)"
                  @change="changeImageTagAndVersion"
                >
                  <el-option
                    v-for="item in appInfoVersionList"
                    :key="item"
                    :label="item"
                    :value="item"
                  >
                  </el-option>
                </el-select>
              </el-col>
            </el-row>
          </div>
        </div>
        <div style="float: right; margin-top: 10px">
          <el-switch
            v-model="expandSwitch"
            active-color="#13ce66"
            inactive-color="#eeeeee"
            active-text="展开"
            @change="expandAll"
          >
          </el-switch>
        </div>
        <div style="margin-top: 40px">
          <div>
            <el-collapse v-model="activeName" :accordion="accordionType">
              <el-collapse-item
                title="端口设置"
                name="1"
                v-show="openType === 'configuration'"
              >
                <div
                  v-for="(
                    portInfo, index
                  ) in gvStoreYamlDeployVo.yamlDeployPortInfo"
                  :key="portInfo.port"
                  style="margin-bottom: 5px"
                >
                  <el-row>
                    <el-col :span="4">
                      <span> 协议： </span>
                      <el-input
                        :disabled="true"
                        style="width: 80px"
                        v-model="portInfo.protocol"
                        size="small"
                      >
                      </el-input>
                    </el-col>
                    <el-col :span="4">
                      <span> 内部端口： </span>
                      <el-input
                        style="width: 80px"
                        v-model="portInfo.port"
                        disabled
                        size="small"
                      >
                      </el-input>
                    </el-col>
                    <el-col :span="4">
                      <span> 暴露端口： </span>
                      <el-input
                        style="width: 80px"
                        v-model="portInfo.expose"
                        v-show="!portInfo.fixed"
                        disabled
                        size="small"
                      >
                      </el-input>
                      <el-input
                        style="width: 80px"
                        v-model="portInfo.port"
                        v-show="portInfo.fixed"
                        disabled
                        size="small"
                      >
                      </el-input>
                    </el-col>
                    <el-col :span="4" v-show="portInfo.enableDns">
                      <span> DNS： </span>
                      <el-input
                        style="width: 80px"
                        v-model="portInfo.dns"
                        disabled
                        size="small"
                      >
                      </el-input>
                    </el-col>
                  </el-row>
                </div>
              </el-collapse-item>
              <el-collapse-item title="资源配置" name="2">
                <div>
                  <el-row>
                    <el-col :span="8">
                      <div style="margin-bottom: 5px">
                        <span> CPU预留： </span>
                        <el-input
                          style="width: 250px"
                          v-model="
                            gvStoreYamlDeployVo.yamlDeployResourceInfo
                              .cpuRequest
                          "
                          controls-position="right"
                          :min="0.1"
                          :max="256"
                          :step="0.1"
                          type="number"
                          @blur="checkCpu"
                        >
                          <template v-slot:append>核</template>
                        </el-input>
                      </div>
                      <div
                        v-show="
                          gvStoreYamlDeployVo.yamlDeployResourceInfo.enableLimit
                        "
                      >
                        <span> CPU限制： </span>
                        <el-input
                          style="width: 250px"
                          v-model="
                            gvStoreYamlDeployVo.yamlDeployResourceInfo.cpuLimit
                          "
                          controls-position="right"
                          :min="0.1"
                          :max="256"
                          :step="0.1"
                          type="number"
                          @blur="checkCpu"
                        >
                          <template v-slot:append>核</template>
                        </el-input>
                      </div>
                      <div>
                        <span> CPU可用： </span>
                        <span>{{ remainResourceInfo.cpu }}核</span>
                      </div>
                    </el-col>
                    <el-col :span="8">
                      <div style="margin-bottom: 5px">
                        <span> 内存预留： </span>
                        <el-input
                          style="width: 250px"
                          v-model="
                            gvStoreYamlDeployVo.yamlDeployResourceInfo
                              .memRequest
                          "
                          controls-position="right"
                          :min="4"
                          :max="16384"
                          :step="256"
                          type="number"
                          @blur="checkMemory"
                        >
                          <template v-slot:append>MB</template>
                        </el-input>
                      </div>
                      <div
                        v-show="
                          gvStoreYamlDeployVo.yamlDeployResourceInfo.enableLimit
                        "
                      >
                        <span> 内存限制： </span>
                        <el-input
                          style="width: 250px"
                          v-model="
                            gvStoreYamlDeployVo.yamlDeployResourceInfo.memLimit
                          "
                          controls-position="right"
                          :min="4"
                          :max="16384"
                          :step="256"
                          type="number"
                          @blur="checkMemory"
                        >
                          <template v-slot:append>MB</template>
                        </el-input>
                      </div>
                      <div>
                        <span> 内存可用： </span>
                        <span>{{ remainResourceInfo.memory }}MB</span>
                      </div>
                    </el-col>
                    <el-col :span="8">
                      <el-switch
                        v-model="
                          gvStoreYamlDeployVo.yamlDeployResourceInfo.enableLimit
                        "
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        :active-text="resourceLimitText"
                        @change="changeResourceLimitStatus"
                      >
                      </el-switch>
                    </el-col>
                  </el-row>
                </div>
              </el-collapse-item>
              <el-collapse-item name="3" v-show="openType === 'configuration'">
                <template slot="title">
                  自动伸缩
                  <el-switch
                    v-model="gvStoreYamlDeployVo.enableHpa"
                    active-color="#13ce66"
                    inactive-color="#989898"
                    style="margin-left: 20px"
                  >
                  </el-switch>
                </template>
                <div>
                  <el-row style="margin-bottom: 5px">
                    <el-col :span="10">
                      <span class="spanStyle"> 触发条件： </span>
                      <el-select
                        v-model="metricsInfo.type"
                        placeholder="请选择"
                        style="width: 100px; margin-right: 10px"
                      >
                        <el-option
                          v-for="selectMetrics in selectMetricsList"
                          :key="selectMetrics.value"
                          :label="selectMetrics.label"
                          :value="selectMetrics.value"
                        >
                        </el-option>
                      </el-select>
                      <span class="spanStyle"> 使用量： </span>
                      <el-input-number
                        style="width: 100px"
                        v-model="metricsInfo.usage"
                        controls-position="right"
                        :min="1"
                        :max="99"
                        :step="1"
                      >
                      </el-input-number>
                      %
                      <el-button
                        type="primary"
                        size="mini"
                        icon="el-icon-plus"
                        circle
                        style="margin-left: 10px"
                        @click="addHapInfoMetrics"
                        class="el-button-primary-style"
                      ></el-button>
                    </el-col>
                    <el-col
                      :span="5"
                      v-for="(mt, index) in gvStoreYamlDeployVo
                        .yamlDeployHpaInfo.metrics"
                      :key="mt.type"
                    >
                      <span class="spanStyle">
                        类型：{{ mt.type }} - 值：{{ mt.usage }} %
                        <el-button
                          type="primary"
                          size="mini"
                          icon="el-icon-delete"
                          circle
                          style="margin-left: 10px"
                          @click="deleteMetrics(index)"
                          class="el-button-primary-style"
                        ></el-button>
                      </span>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="15">
                      <span class="spanStyle"> 伸缩范围： </span>
                      <el-input-number
                        style="width: 100px"
                        v-model="
                          gvStoreYamlDeployVo.yamlDeployHpaInfo.minReplicas
                        "
                        controls-position="right"
                        :min="1"
                        :max="99"
                        :step="1"
                        @blur="checkReplicas"
                      >
                      </el-input-number>
                      ～
                      <el-input-number
                        style="width: 100px"
                        v-model="
                          gvStoreYamlDeployVo.yamlDeployHpaInfo.maxReplicas
                        "
                        controls-position="right"
                        :min="1"
                        :max="99"
                        :step="1"
                        @blur="checkReplicas"
                      >
                      </el-input-number>
                      <span style="margin-left: 10px">注：1-99之间</span>
                    </el-col>
                  </el-row>
                </div>
              </el-collapse-item>
              <el-collapse-item
                title="配置挂载"
                name="4"
                v-show="openType === 'configuration' && gvStoreYamlDeployVo.yamlDeployConfigInfo.length !== 0"
              >
                <div
                  v-for="(
                    deployConfigInfo, index
                  ) in gvStoreYamlDeployVo.yamlDeployConfigInfo"
                  :key="index"
                  style="margin-bottom: 5px"
                >
                  <el-row>
                    <el-col :span="5">
                      <span> 文件名称： </span>
                      <el-input
                        style="width: 150px"
                        v-model="deployConfigInfo.mountFilename"
                        disabled
                      >
                      </el-input>
                    </el-col>
                    <el-col :span="10">
                      <span> 挂载路径： </span>
                      <el-input
                        style="width: 350px"
                        v-model="deployConfigInfo.mountPath"
                        disabled
                      >
                      </el-input>
                    </el-col>
                    <!--                    <el-col :span="3">-->
                    <!--                      <el-button type="primary" size="small"-->
                    <!--                                 @click="getFileDataById(gvStoreYamlDeployVo.yamlDeployBaseInfo.appId,-->
                    <!--                                 deployConfigInfo.mountPath, deployConfigInfo.mountFiledata)"-->
                    <!--                      >-->
                    <!--                        编 辑-->
                    <!--                      </el-button>-->
                    <!--                    </el-col>-->
                  </el-row>
                </div>
              </el-collapse-item>
              <el-collapse-item
                title="存储挂载"
                name="5"
                v-show="openType === 'configuration' && gvStoreYamlDeployVo.yamlDeployVolumeInfo.length !== 0"
              >
                <div
                  v-for="(
                    deployVolumeInfo, index
                  ) in gvStoreYamlDeployVo.yamlDeployVolumeInfo"
                  :key="index"
                  style="margin-bottom: 5px"
                >
                  <el-row>
                    <el-col :span="3">
                      <el-switch
                        v-model="deployVolumeInfo.autoCreate"
                        active-color="#13ce66"
                        inactive-color="#989898"
                        :active-text="
                          deployVolumeInfo.autoCreate ? '自动创建' : '选择已有'
                        "
                      >
                      </el-switch>
                    </el-col>
                    <el-col :span="8">
                      <span> 挂载路径： </span>
                      <el-input
                        style="width: 300px"
                        v-model="deployVolumeInfo.mountPath"
                        disabled
                      >
                      </el-input>
                    </el-col>
                    <el-col :span="6" v-show="deployVolumeInfo.autoCreate">
                      <span> 挂载模式： </span>
                      <el-select
                        v-model="deployVolumeInfo.accessMode"
                        placeholder="请选择挂载模式"
                      >
                        <el-option
                          v-for="item in volumeAccessMode"
                          :key="item"
                          :label="item"
                          :value="item"
                        >
                        </el-option>
                      </el-select>
                    </el-col>
                    <el-col :span="6" v-show="!deployVolumeInfo.autoCreate">
                      <span> 已有挂载： </span>
                      <el-select
                        v-model="deployVolumeInfo.pvcId"
                        placeholder="请选择已存在的挂载卷"
                      >
                        <el-option
                          v-for="item in existPvcList"
                          :key="item.id"
                          :label="item.pvcName"
                          :value="item.id"
                        >
                        </el-option>
                      </el-select>
                    </el-col>
                    <el-col :span="5" v-show="deployVolumeInfo.autoCreate">
                      <span> 挂载容量： </span>
                      <el-input
                        style="width: 180px"
                        v-model="deployVolumeInfo.capacity"
                        controls-position="right"
                        :min="0"
                        :max="1024"
                        :step="1"
                        type="number"
                      >
                        <template v-slot:append>GB</template>
                      </el-input>
                    </el-col>
                  </el-row>
                </div>
              </el-collapse-item>
              <el-collapse-item title="环境变量" name="6">
                <el-row :gutter="20">
                  <el-col :span="6">
                    <div style="margin-bottom: 5px">KEY</div>
                  </el-col>
                  <el-col :span="6">
                    <div style="margin-bottom: 5px">VALUE</div>
                  </el-col>
                  <el-col :span="11">
                    <div style="float: right">
                      <el-button
                        type="primary"
                        round
                        size="small"
                        @click="addNewEnv"
                        class="el-button-primary-style"
                      >
                        <i class="el-icon-plus"></i>新增
                      </el-button>
                    </div>
                  </el-col>
                </el-row>
                <div
                  v-for="(
                    envInfo, index
                  ) in gvStoreYamlDeployVo.yamlDeployEnvInfo"
                  :key="index"
                >
                  <el-row :gutter="20">
                    <el-col :span="6">
                      <div style="margin-bottom: 5px">
                        <el-input
                          v-model="envInfo.key"
                          :disabled="index < gvEnvLength"
                          @blur="judgeReg(index)"
                        >
                        </el-input>
                      </div>
                    </el-col>
                    <el-col :span="6">
                      <div style="margin-bottom: 5px">
                        <el-input
                          v-model="envInfo.value"
                          @blur="judgeReg(index)"
                        >
                        </el-input>
                      </div>
                    </el-col>
                    <el-col :span="3">
                      <el-button
                        type="primary"
                        class="el-button-primary-style"
                        size="small"
                        @click="deleteEnvForEnvList(index)"
                        v-show="index >= gvEnvLength"
                      >删除
                      </el-button>
                    </el-col>
                  </el-row>
                </div>
              </el-collapse-item>
            </el-collapse>
          </div>
        </div>
      </div>
      <div class="deployButtonDiv">
        <el-button
          type="primary"
          size="small"
          @click="saveServiceInstance()"
          v-show="openType === 'configuration'"
          class="el-button-primary-style"
        >保 存
        </el-button>
        <el-button
          type="primary"
          size="small"
          @click="updateServiceInstance()"
          v-show="openType === 'update'"
          class="el-button-primary-style"
        >
          升 级
        </el-button>
        <el-button
          type="primary"
          size="small"
          @click="close()"
          class="el-button-primary-style"
        >
          取消
        </el-button>
      </div>
    </div>
    <!--    <div>-->
    <!--      <el-dialog-->
    <!--        title="查看并编辑配置文件"-->
    <!--        :visible.sync="editConfigFileDialog"-->
    <!--        width="60%"-->
    <!--        :close-on-press-escape="false"-->
    <!--        :close-on-click-modal="false"-->
    <!--        :destroy-on-close="true"-->
    <!--      >-->
    <!--        <div>-->
    <!--          <el-input type="textarea" v-model="configFileContext" :rows="24"></el-input>-->
    <!--        </div>-->
    <!--        <div class="deployButtonDiv">-->
    <!--          <el-button type="primary" size="small" @click="saveConfigFileContext">保 存</el-button>-->
    <!--          <el-button type="primary" size="small" @click="closeEditConfigFileDialog">取 消</el-button>-->
    <!--        </div>-->
    <!--      </el-dialog>-->
    <!--    </div>-->
  </div>
</template>

<script>
  export default {
    name: "ServiceInstanceConfiguration",
    props: ["openType", "deployId"],
    data() {
      return {
        title: "服务配置",
        activeName: "0",
        accordionType: true,
        expandSwitch: false,
        appInfoVersionList: [],
        gvStoreYamlDeployVo: {
          deployId: "",
          yamlDeployBaseInfo: {
            appName: "",
            deployName: "",
            version: "",
            image: "",
            description: "",
            replicas: 1,
            appId: "",
            appZhName: "",
            namespace: "",
            deployVersion: 1,
          },
          yamlDeployPortInfo: [],
          yamlDeployResourceInfo: {
            enableLimit: false,
            cpuRequest: 0,
            memRequest: 0,
            cpuLimit: 0,
            memLimit: 0,
          },
          enableHpa: false,
          yamlDeployHpaInfo: {
            maxReplicas: 10,
            minReplicas: 0,
            metrics: [],
          },
          yamlDeployConfigInfo: [],
          yamlDeployVolumeInfo: [],
          yamlDeployEnvInfo: [],
          livenessInfoOffline: {
            // 冒烟测试类型 url,file,program
            type: "",
            port: 0,
            portType: "",
            url: "",
            command: [],
            initialDelaySeconds: 0,
            periodSeconds: 0,
            timeoutSeconds: 0,
            persistentConnection: false,
            successThreshold: 0,
            failureThreshold: 0,
          },
          readinessInfoOffline: {
            // 冒烟测试类型 url,file,program
            type: "",
            port: 0,
            portType: "",
            url: "",
            command: [],
            initialDelaySeconds: 0,
            periodSeconds: 0,
            timeoutSeconds: 0,
            persistentConnection: false,
            successThreshold: 0,
            failureThreshold: 0,
          },
        },
        metricsInfo: {
          type: "",
          usage: 0,
        },
        selectMetricsList: [
          {
            value: "cpu",
            label: "CPU",
          },
          {
            value: "memory",
            label: "内存",
          },
        ],
        gvEnvLength: 0,
        resourceLimitText: "开启资源限制",
        volumeStatusText: "自动创建",
        volumeAccessMode: ["ReadWriteOnce", "ReadOnlyMany", "ReadWriteMany"],
        existPvcList: [],
        // editConfigFileDialog: false,
        configFileContext: "",
        remainResourceInfo: {
          cpu: 0,
          memory: 0,
        }
      };
    },
    methods: {
      getAppInfoVersionList(appName) {
        this.$appStoreApi
          .appNameVersionList(appName)
          .then((res) => {
            if (res && res.code === 200) {
              this.appInfoVersionList = res.data;
            }
          })
          .catch((error) => {
            this.$message.error(error.message);
          });
      },
      changeImageTagAndVersion(version) {
        this.gvStoreYamlDeployVo.yamlDeployBaseInfo.image = this.gvStoreYamlDeployVo.yamlDeployBaseInfo.image.split(':')[0] + ":" + version;
        this.gvStoreYamlDeployVo.yamlDeployBaseInfo.version = version;
      },
      expandAll() {
        if (this.expandSwitch) {
          this.accordionType = false;
          this.activeName = ["1", "2", "3", "4", "5", "6"];
        } else {
          this.accordionType = true;
          this.activeName = "0";
        }
      },
      getMaxResourceInfo() {
        this.$tenantManageApi.getMaxResources().then(res => {
          if (res && res.code === 200) {
            this.remainResourceInfo = res.data;
          }
        })
      },
      checkCpu() {
        if (
          this.gvStoreYamlDeployVo.yamlDeployResourceInfo.cpuRequest >
          this.remainResourceInfo.cpu
        ) {
          this.$message.error("CPU资源值不能超过可用资源");
          return;
        }
        if (this.gvStoreYamlDeployVo.yamlDeployResourceInfo.enableLimit) {
          if (
            this.gvStoreYamlDeployVo.yamlDeployResourceInfo.cpuLimit >
            this.remainResourceInfo.cpu
          ) {
            this.$message.error("CPU资源值不能超过可用资源");
          }
        }
      },
      checkMemory() {
        if (
          this.gvStoreYamlDeployVo.yamlDeployResourceInfo.memRequest >
          this.remainResourceInfo.memory
        ) {
          this.$message.error("内存资源值不能超过可用资源");
          return;
        }
        if (this.gvStoreYamlDeployVo.yamlDeployResourceInfo.enableLimit) {
          if (
            this.gvStoreYamlDeployVo.yamlDeployResourceInfo.memLimit >
            this.remainResourceInfo.memory
          ) {
            this.$message.error("CPU资源值不能超过可用资源");
          }
        }
      },
      getOneServiceInstanceInfo(deployId) {
        this.$appManageApi.getDeployConfig(deployId).then((res) => {
          if (res && res.code === 200) {
            this.gvStoreYamlDeployVo = res.data;
            this.gvEnvLength = res.data.yamlDeployEnvInfo.length;
            if (this.gvStoreYamlDeployVo.yamlDeployHpaInfo.metrics === null) {
              this.gvStoreYamlDeployVo.yamlDeployHpaInfo.metrics = [];
            }
          }
        });
      },
      addNewEnv() {
        let filter = this.gvStoreYamlDeployVo.yamlDeployEnvInfo.filter(
          (ele) => ele.value === "" || ele.key === ""
        );
        if (filter.length > 0) {
          this.$message.warning("请先将空数据填写完整");
        } else {
          this.gvStoreYamlDeployVo.yamlDeployEnvInfo.push({
            key: "",
            value: "",
          });
        }
      },
      saveServiceInstance() {
        if (this.checkResourceInfo()) {
          return;
        }
        for (let i = 0; i < this.gvStoreYamlDeployVo.yamlDeployEnvInfo.length; i++) {
          let b = this.judgeReg(i);
          if (!b) {
            return;
          }
        }
        if (this.gvStoreYamlDeployVo.yamlDeployResourceInfo.enableLimit) {
          if (
            this.gvStoreYamlDeployVo.yamlDeployResourceInfo.cpuLimit <
            this.gvStoreYamlDeployVo.yamlDeployResourceInfo.cpuRequest ||
            this.gvStoreYamlDeployVo.yamlDeployResourceInfo.memLimit <
            this.gvStoreYamlDeployVo.yamlDeployResourceInfo.memRequest
          ) {
            this.$message.error("开启资源限制时，预留值不能高于限制值");
            return;
          }
        }
        if (
          this.gvStoreYamlDeployVo.yamlDeployResourceInfo.cpuRequest >
          this.remainResourceInfo.cpu
        ) {
          this.$message.error("CPU资源值不能超过可用资源");
          return;
        }
        if (this.gvStoreYamlDeployVo.yamlDeployResourceInfo.enableLimit) {
          if (
            this.gvStoreYamlDeployVo.yamlDeployResourceInfo.cpuLimit >
            this.remainResourceInfo.cpu
          ) {
            this.$message.error("CPU资源值不能超过可用资源");
            return;
          }
        }
        if (this.gvStoreYamlDeployVo.enableHpa) {
          if (!this.checkReplicas()) {
            return;
          }
        }
        if (
          this.gvStoreYamlDeployVo.yamlDeployResourceInfo.memRequest >
          this.remainResourceInfo.memory
        ) {
          this.$message.error("内存资源值不能超过可用资源");
          return;
        }
        if (this.gvStoreYamlDeployVo.yamlDeployResourceInfo.enableLimit) {
          if (
            this.gvStoreYamlDeployVo.yamlDeployResourceInfo.memLimit >
            this.remainResourceInfo.memory
          ) {
            this.$message.error("内存资源值不能超过可用资源");
            return;
          }
        }
        this.$appManageApi.deployYaml(this.gvStoreYamlDeployVo).then((res) => {
          if (res && res.code === 200) {
            this.$message.success(res.data);
            this.$emit("closeServiceSetUpDialog");
          }
        });
      },
      updateServiceInstance() {
        if (this.checkResourceInfo()) {
          return;
        }
        for (
          let i = 0;
          i < this.gvStoreYamlDeployVo.yamlDeployEnvInfo.length;
          i++
        ) {
          let b = this.judgeReg(i);
          if (!b) {
            return;
          }
        }
        this.$appManageApi
          .upgradeYamlDeploy(this.gvStoreYamlDeployVo)
          .then((res) => {
            if (res && res.code === 200) {
              this.$message.success(res.data);
              this.$emit("closeServiceSetUpDialog");
            }
          });
      },
      close() {
        this.$emit("closeServiceSetUpDialog");
      },
      checkResourceInfo() {
        if (this.gvStoreYamlDeployVo.yamlDeployResourceInfo.enableLimit) {
          if (
            this.gvStoreYamlDeployVo.yamlDeployResourceInfo.cpuLimit <
            this.gvStoreYamlDeployVo.yamlDeployResourceInfo.cpuRequest ||
            this.gvStoreYamlDeployVo.yamlDeployResourceInfo.memLimit <
            this.gvStoreYamlDeployVo.yamlDeployResourceInfo.memRequest
          ) {
            this.$message.error("开启资源限制时，预留值不能高于限制值");
            return true;
          }
        }
        return false;
      },
      changeResourceLimitStatus(status) {
        if (status) {
          this.resourceLimitText = "开启资源限制";
        } else {
          this.resourceLimitText = "关闭资源限制";
        }
      },
      checkReplicas() {
        if (this.gvStoreYamlDeployVo.yamlDeployHpaInfo.maxReplicas < this.gvStoreYamlDeployVo.yamlDeployHpaInfo.minReplicas) {
          this.$message.error("伸缩范围最小值不能大于最大值");
          return false;
        }
        return true;
      },
      getExistPvcList() {
        this.$storagePvcApi.listAllPvc().then((res) => {
          if (res && res.code === 200) {
            this.existPvcList = res.data;
          }
        });
      },
      // getFileDataById(id, mountFilePath, mountFiledata) {
      //   this.editConfigFileDialog = true;
      //   if (mountFiledata === "") {
      //     this.$appStoreApi.getFileData({id: id, mountFilepath: mountFilePath}).then(res => {
      //       if (res && res.code === 200) {
      //         this.configFileContext = res.data;
      //         this.mountPath = mountFilePath;
      //       }
      //     })
      //   } else {
      //     this.configFileContext = mountFiledata;
      //   }
      // },
      // closeEditConfigFileDialog() {
      //   this.editConfigFileDialog = false;
      // },
      // saveConfigFileContext() {
      //   this.gvStoreYamlDeployVo.yamlDeployConfigInfo.forEach(ele => {
      //     if (ele.mountPath === this.mountPath) {
      //       ele.mountFiledata = this.configFileContext;
      //     }
      //   })
      //   this.editConfigFileDialog = false;
      // },
      addHapInfoMetrics() {
        if (this.metricsInfo.type === "" || this.metricsInfo.usage === 0) {
          this.$message.warning("请先选择数据，并确保使用量不为0");
          return;
        }
        const existingIndex =
          this.gvStoreYamlDeployVo.yamlDeployHpaInfo.metrics.findIndex(
            (item) => item.type === this.metricsInfo.type
          );
        if (existingIndex !== -1) {
          // 如果已存在相同的 key，则更新对应的 value
          this.$set(
            this.gvStoreYamlDeployVo.yamlDeployHpaInfo.metrics,
            existingIndex,
            {
              ...this.gvStoreYamlDeployVo.yamlDeployHpaInfo.metrics[
                existingIndex
                ],
              ...this.metricsInfo,
            }
          );
        } else {
          // 如果不存在相同的 key，则添加新的数据
          this.gvStoreYamlDeployVo.yamlDeployHpaInfo.metrics.push({
            ...this.metricsInfo,
          });
        }
        this.metricsInfo = {
          type: "",
          usage: 0,
        };
      },
      judgeReg(index) {
        const keyPattern = /^[a-zA-Z][a-zA-Z0-9_]{1,64}$/;
        const labelPattern = /^[a-zA-Z0-9-_./%:; @]{1,64}$/;
        if (!keyPattern.test(this.gvStoreYamlDeployVo.yamlDeployEnvInfo[index].key) || this.gvStoreYamlDeployVo.yamlDeployEnvInfo[index].key === ""
        ) {
          this.$message.error("环境变量KEY值只能包含字母、数字、_，以字母开头且长度不超过64位");
          return false;
        }
        if (!labelPattern.test(this.gvStoreYamlDeployVo.yamlDeployEnvInfo[index].value) || this.gvStoreYamlDeployVo.yamlDeployEnvInfo[index].value === ""
        ) {
          this.$message.error("环境变量VALUE值只能包含字母、数字、.、_、-、/等，且长度不超过64位");
          return false;
        }
        this.gvStoreYamlDeployVo.yamlDeployEnvInfo[index].value = this.gvStoreYamlDeployVo.yamlDeployEnvInfo[index].value.trim();
        return true;
      },
      deleteEnvForEnvList(index) {
        this.gvStoreYamlDeployVo.yamlDeployEnvInfo.splice(index, 1);
      },
      deleteMetrics(index) {
        this.gvStoreYamlDeployVo.yamlDeployHpaInfo.metrics.splice(index, 1);
      },
    },
    beforeMount() {
      if (this.openType === "update") {
        this.title = "服务升级";
        this.expandSwitch = true;
        this.expandAll();
      }
      this.getOneServiceInstanceInfo(this.deployId);
      this.getExistPvcList();
      this.getMaxResourceInfo();
    },
  };
</script>

<style lang="css">
  .servicePackageListInstance {
    height: 60vh;
    background-color: white;
  }

  .el-collapse-item__header {
    font-size: 18px !important;
  }

  .el-switch__label * {
    font-size: 18px !important;
  }
</style>
